<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>订单详细</span>
        </div>
      </template>
      <div class="tag">
        <div class="left">
          <el-tag class="mx-1" type="success" effect="dark">
            <div class="left-tag">
              <svg
                t="1697972416299"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4011"
                width="16"
                height="16"
              >
                <path
                  d="M817.728 198.72l111.744 114.56-545.216 532.128-285.92-273.024 110.528-115.712 174.176 166.336z"
                  fill="#ffffff"
                  p-id="4012"
                ></path>
              </svg>
              <p>{{ OrdersInfo.param?.orderStatusString }}</p>
            </div>
          </el-tag>
        </div>
        <div class="right">
          <img src="../../../../assets/images/code_app.png" alt="" />
          <div class="right-info">
            <p>微信关注“北京114预约挂号”</p>
            <p>"快速预约挂号"</p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊人姓名</div>
              </template>
              {{ OrdersInfo.patientName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊日期</div>
              </template>
              {{ OrdersInfo.reserveDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室</div>
              </template>
              {{ OrdersInfo.depname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生职称</div>
              </template>
              {{ OrdersInfo.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医院服务费</div>
              </template>
              {{ OrdersInfo.amount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号单号</div>
              </template>
              {{ OrdersInfo.outTradeNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号时间</div>
              </template>
              {{ OrdersInfo.createTime }}
            </el-descriptions-item>
          </el-descriptions>
          <div
            class="left-bottom"
            v-if="OrdersInfo.orderStatus == 0 || OrdersInfo.orderStatus == 1"
          >
            <el-popconfirm title="你确定取消预约吗?" @confirm="CancelOrder">
              <template #reference>
                <el-button>取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button
              type="primary"
              v-if="OrdersInfo.orderStatus == 0"
              @click="openDialog"
              >支付</el-button
            >
          </div>
        </div>
        <div class="right">
          <el-card>
            <template #header>
              <span>注意事项</span>
            </template>
            <div class="contend">
              <p>
                1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
              </p>
              <p style="color: red">
                2.【取号】就诊当天需在{{ OrdersInfo.fetchTime }}
                在医院取号，未取号视为爽约，该号不退不换；
              </p>
              <p>
                3.【退号】在{{ OrdersInfo.quitTime }}前可在线退号
                ，逾期将不可办理退号退费；
              </p>
              <p>
                4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
              </p>
              <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
            </div>
          </el-card>
        </div>
        <el-dialog v-model="dialogVisible" title="微信支付" width="30%" @close="closeDialog">
         <div class="qercode">
          <img :src="PayUrl" alt="">
          <p>使用微信扫一扫</p>
          <p>扫描二维码支付</p>
         </div>
          <template #footer>
            <el-button @click="closeDialog">关闭窗口</el-button>
          </template>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
//引入组合式api
import { onMounted, ref } from "vue";
//引入路由器
import { useRoute } from "vue-router";
//引入接口
import { reqGetOrders, reqCancelOrder,reqWeixinPay,reqWeixinPayStatus } from "@/api/User/index";
import type { responseOdersInfo,responseWeiXinPay,responsePayStatus } from "@/api/User/type";
import { ElMessage } from "element-plus";
//引入插件
//@ts-ignore
import QRCode from 'qrcode'
//创建路由
let $route = useRoute();
//存储订单数据
let OrdersInfo = ref<any>({});
//控制对话框显示与隐藏的数据
let dialogVisible = ref<boolean>(false);
//支付二维码
let PayUrl = ref<string>("");
//定时器
let timer = ref<any>();
//挂载时获取订单信息
onMounted(() => {
  getOrders();
});
//获取订单的信息
const getOrders = async () => {
  //整理数据
  let id: any = $route.query.id;
  //发请求
  let result: responseOdersInfo = await reqGetOrders(id);
  if (result.code == 200) {
    //存储数据
    OrdersInfo.value = result.data;
  }
};
//取消订单按钮的回调
const CancelOrder = async () => {
  //整理参数
  let OrderId = $route.query.id;
  try {
    let result = await reqCancelOrder(OrderId as string);
    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: "取消预约成功！",
      });
    } else {
      ElMessage({
        type: "warning",
        message: result.message,
      });
    }
    getOrders();
  } catch (error) {
    ElMessage({
      type: "error",
      message: "取消预约失败！",
    });
  }
};
//支付按钮的回调
const openDialog = async () => {
  //显示对话框
  dialogVisible.value = true;
  //获取订单id
  let OrderId = $route.query.id;
  //发请求
  let result:responseWeiXinPay = await reqWeixinPay(OrderId as string)
  if(result.code == 200) {
      PayUrl.value = await QRCode.toDataURL(result.data.codeUrl)
      timer.value = setInterval(async ()=>{
        
        
        //发请求
        let result:responsePayStatus= await reqWeixinPayStatus(OrderId as string)
        if(result.data) {
          dialogVisible.value = false;
          getOrders();
          ElMessage({
            type:'success',
            message:'支付成功'
          })
          clearInterval(timer.value)
        }
      },1000)
  }
  
};
//关闭窗口的额回调
const closeDialog = () => {
  dialogVisible.value = false;
  clearInterval(timer.value)
};
</script>

<style scoped lang="scss">
.box {
  color: #7f7f7f;
  .card-header {
    font-size: 25px;
    font-weight: 900;
    color: #7f7f7f;
  }
  .tag {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    .left {
      .left-tag {
        display: flex;
        align-items: center;
        p {
          margin-left: 5px;
        }
      }
    }
    .right {
      display: flex;
      img {
        width: 40px;
        height: 40px;
      }
      .right-info {
        font-size: 13px;
        p {
          line-height: 20px;
          margin-left: 10px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 30px;
    padding: 10px;
    .left {
      flex: 4;
      .left-bottom {
        margin-top: 20px;
      }
    }
    .right {
      flex: 6;
      margin-left: 10px;
      span {
        font-size: 18px;
        font-weight: 900;
      }
      .contend {
        p {
          margin: 10px 0;
          line-height: 25px;
        }
      }
  
    }
    .qercode {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          line-height: 20px;
          font-weight: 900;
        }
      }
  }
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
</style>
